<template>
  <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" :inline="true">
      <el-form-item>
        <el-input
          placeholder="问卷名称"
          v-model="pagination.queryString"
          clearable
          style="width: 200px"
          class="filter-item"
        ></el-input>
        <el-select v-model="value" placeholder="问卷类型" class="link-left">
          <el-option
            v-for="item in wjTypeEnum"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button class="link-left" @click="findPage()">查询</el-button>
        <el-button type="primary" class="butT" @click="handleCreate()"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      size="small"
      current-row-key="id"
      :data="dataList"
      stripe
      highlight-current-row
    >
      <el-table-column
        type="index"
        align="center"
        label="序号"
      ></el-table-column>
      <el-table-column
        prop="wjName"
        label="问卷名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="wjType"
        label="问卷类型"
        align="center"
      ></el-table-column>
      <el-table-column prop="wjEwm" label="二维码" align="center">
        <template slot-scope="scope">
          <viewer
            ><img
              style="width: 100px; height: 100px"
              :src="scope.row.wjEwm" /></viewer></template
      ></el-table-column>
        <!-- <el-image style="width: 100px; height: 100px" :src="dataList[0].wjEwm">
        </el-image> -->
        <!-- <img :src="qrImageUrl" style="width: 200px; height: 200px" /> -->
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="handleEWM(scope.row)"
            >发布</el-button
          >
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        class="pagiantion"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    <!-- 新增标签弹层 title="新增检查项"-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataAddForm"
        :model="formData"
        :rules="rules"
        label-position="right"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="问卷名称：" prop="wjName">
              <el-input v-model="formData.wjName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="问卷类型：" prop="wjType">
              <el-select v-model="formData.wjType" placeholder="问卷类型">
                <el-option
                  v-for="item in wjTypeEnum"
                  :key="item.key"
                  :value="item.key"
                  :label="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdd()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
import Pagination from "@/components/Pagination";
import examPaperApi from "@/api/examPaper";
import wjApi from "@/api/wj";

export default {
  components: { Pagination },
  data() {
    return {
      title: "",
      queryParam: {
        id: null,
        level: null,
        subjectId: null,
        pageIndex: 1,
        pageSize: 10,
      },
      formData: {
        id: null,
        wjName: "",
        wjType: "",
        qrImageUrl: "",
      },
      qrImageUrl: "",
      pagination: {
        //分页相关模型数据
        currentPage: 1, //当前页码
        pageSize: 10, //每页显示的记录数
        total: 0, //总记录数
        queryString: null, //查询条件
      },
      dialogFormVisible: false, //增加表单是否可见
      dialogFormVisible4Edit: false, //编辑表单是否可见
      rules: {
        //校验规则
        code: [
          { required: true, message: "项目编码为必填项", trigger: "blur" },
        ],
        name: [
          { required: true, message: "项目名称为必填项", trigger: "blur" },
        ],
      },
      wjTypeEnum: [
        {
          key: 1,
          value: "宫颈癌问卷",
        },
        {
          key: 2,
          value: "乳腺癌问卷",
        },
      ],
      value: "",
      subjectFilter: null,
      listLoading: true,
      dataList: [],
      total: 0,
    };
  },
  created() {
    this.findPage(); //调用分页方法
  },
  methods: {
    //清除表单数据
    resetForm() {
      this.formData = {};
    },
    //删除
    handleDelete(row) {
      console.log(row);
      // this.findPage(); //调用分页方法
      this.deletePaper(row);
    },
    //弹出添加的对话框
    handleCreate() {
      this.title = "新增检查项";
      this.resetForm(); //清空表单
      this.dialogFormVisible = true; //调出添加的弹窗
    },
    handleAdd() {
      this.$refs["dataAddForm"].validate((valid) => {
        if (valid) {
          this.formLoading = true;
          if (this.formData.id != null) {
            wjApi.edit(this.formData).then((res) => {
              if (res.flag) {
                //请求处理成功;
                this.$message({
                  type: "success",
                  message: res.message,
                });
                this.findPage();
                this.dialogFormVisible = false; //隐藏对话框
              } else {
                //请求处理失败
                this.$message.error(res.message);
              }
            });
          } else {
            wjApi.add(this.formData).then((res) => {
              if (res.flag) {
                //请求处理成功;
                this.$message({
                  type: "success",
                  message: res.message,
                });
                this.findPage();
                this.dialogFormVisible = false; //隐藏对话框
              } else {
                //请求处理失败
                this.$message.error(res.message);
              }
            });
          }
        } else {
          this.$message.error("表单数据校验失败，请检查输入" + "是否正确！");
        }
      });
    },
    //分页查询
    findPage() {
      //定义分页参数
      var param = {
        currentPage: this.pagination.currentPage, //当前页
        pageSize: this.pagination.pageSize, //每页显示记录数
        queryString: this.pagination.queryString, //查询条件
      };
      //发送Ajax请求，进行分页查询
      wjApi.findPage(param).then((res) => {
        //为模型数据赋值，基于Vue的双向绑定展示到页面
        this.pagination.total = res.total; //获取总记录数
        this.dataList = res.rows; //获取数据列表
      });
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage; //指定最新的页码
      this.findPage(); //调用分页方法
    },
    handleSizeChange(currentPage) {
      (this.pagination.pageSize = currentPage), //每页显示记录数
        this.findPage(); //调用分页方法
    },
    // 弹出编辑对话框
    handleUpdate(row) {
      this.title = "编辑选项";
      this.resetForm();
      this.dialogFormVisible = true;
      //this.dialogFormVisible4Edit = true; //显示编辑对话框
      //发送Ajax请求，根据id查询数据并回显数据
      this.formData = row;
    },
    handleEWM(row) {
      wjApi.generate(row).then((res) => {
        if (res.flag) {
          //请求处理成功;
          this.$message({
            type: "success",
            message: res.message,
          });
          this.qrImageUrl = res.data;
          this.findPage();
        } else {
          //请求处理失败
          this.$message.error(res.message);
        }
      });
    },
    submitForm() {
      this.queryParam.pageIndex = 1;
      this.search();
    },
    search() {
      this.listLoading = true;
      examPaperApi.pageList(this.queryParam).then((data) => {
        const re = data.response;
        this.tableData = re.list;
        this.total = re.total;
        this.queryParam.pageIndex = re.pageNum;
        this.listLoading = false;
      });
    },
    // deletePaper(row) {
    //   let _this = this;
    //   examPaperApi.deletePaper(row.id).then((re) => {
    //     if (re.code === 1) {
    //       _this.search();
    //       _this.$message.success(re.message);
    //     } else {
    //       _this.$message.error(re.message);
    //     }
    //   });
    // },

    /** 删除按钮操作 */
    deletePaper(row) {
      const _this = this;
      this.$confirm('是否确认删除"' + row.wjName + '"的数据项？', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          wjApi.deletePaper(row.id).then((re) => {
            if (re.code === 1) {
              console.log("失败");
              _this.$message.error(re.message);
            } else {
              console.log("成功");

              _this.$message.success(re.message);
              _this.findPage();
            }
          });
        })
        .catch(() => {});
    },
    // deletePaper(row) {
    //   let _this = this;
    //   wjApi.deletePaper(row.id).then((re) => {
    //     if (re.code === 1) {
    //       _this.search();
    //       _this.$message.success(re.message);
    //     } else {
    //       _this.$message.error(re.message);
    //     }
    //   });
    // },
    levelChange() {
      this.queryParam.subjectId = null;
      this.subjectFilter = this.subjects.filter(
        (data) => data.level === this.queryParam.level
      );
    },
    subjectFormatter(row, column, cellValue, index) {
      return this.subjectEnumFormat(cellValue);
    },
    ...mapActions("exam", { initSubject: "initSubject" }),
  },
  computed: {
    ...mapGetters("enumItem", ["enumFormat"]),
    ...mapState("enumItem", {
      levelEnum: (state) => state.user.levelEnum,
    }),
    ...mapGetters("exam", ["subjectEnumFormat"]),
    ...mapState("exam", { subjects: (state) => state.subjects }),
  },
};
</script>
